<template>
  <q-layout class="bg-image" v-cloak>
    <q-page-container>
      <q-page class="flex flex-center">
        <q-card
          class="login-form"
          v-bind:style="
            $q.platform.is.mobile ? { width: '60%' } : { width: '20%' }
          "
        >
          <q-card-section>
            <q-avatar size="74px" class="absolute-center shadow-10">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685108172&t=232426938cbc64554c6c143fdb13fb4c"
              />
            </q-avatar>
          </q-card-section>
          <q-card-section class="q-mt-md">
            <div class="text-h6 text-center">小王</div>
            <q-input
              v-model="password"
              :type="password == isPwd ? 'password' : 'text'"
              placeholder="输入密码"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd === password ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="
                    () => {
                      password == isPwd;
                    }
                  "
                />
              </template>
            </q-input>
          </q-card-section>
          <q-card-actions align="center">
            <q-btn
              push
              label="解  锁"
              class="text-capitalize"
              color="primary"
            ></q-btn>
          </q-card-actions>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const password = ref('');
const isPwd = ref('123456');
</script>

<style>
.bg-image {
  background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

[v-cloak] {
  display: none !important;
}
</style>
